import React, { FC, useEffect, useRef, useState } from 'react';
import "./index.scss"
import Img from "@/assets/404.png"
import { SpanType } from '../../types';
import { useCommonFunc, useTimeDown } from '../../hooks/useCommon';

// FC FunctionComponent 纯函数组件 
// 定义这个组件接受的参数
const NotFound:FC<{
    msg?:string,
    id?:number,
}> = () => {
    // let [count,setcount] = useState<number>(5)
    let bgstar:any = useRef()
    let [spanList,setSpanList] = useState<Array<SpanType>>([])
    let { gotopage } = useCommonFunc()

    // 倒计时
    // let timer = null as any
    // const timeDown = () => {
    //     timer = setInterval(()=>{
    //         if(count>0){
    //             setcount(--count)
    //         }else{
    //             clearInterval(timer)
    //             timer = null
    //         }
    //     },1000)
    // }

    // 封装倒计时
    const [timeleft,start] = useTimeDown(5,()=>{
        gotopage('/app')
    })

    // 页面雪花
    const getSpanListInit = () => {
        let width = bgstar.current.clientWidth;
        let height = bgstar.current.clientHeight;
        console.log(width,height);
        
        for(var i=0; i<520; i++){
            let left = width*Math.random()
            let top = height*Math.random()
            let scaler = Math.random()*1.5
            let rate = Math.random()*2.5
            // let bgcolor = '#fff'

            let r = Math.floor(Math.random() * 255 )
            let g = Math.floor(Math.random() * 255 )
            let b = Math.floor(Math.random() * 255 )
            let a = Math.random() 
            // let bgcolor = '#fff'
            let bgcolor = `rgba(${r},${g},${b},${a})`

            spanList.push({
                left:left+"px",
                top:top+"px",
                animationDelay:rate+"s",
                transform:`scaler(${scaler})`,
                background:bgcolor,
            })
        }
        setSpanList([...spanList])
    }

    // useEffect(()=>{
    //     timeDown()
    // },[])
    useEffect(()=>{
        start()
        getSpanListInit()
    },[])

    return (
        <div className='errorpage' ref={bgstar}>
            <div className="down" onClick={()=>gotopage("/app")}>剩余 {timeleft} S</div>
                <img src={Img} className='myimg' alt="" />
            {
                spanList.map((item,index)=>{
                    return(
                        <span style={item} key={index} className='spandot'></span>
                    )
                })
            }
        </div>
    );
};

export default NotFound;